<!DOCTYPE html>
<html>

<head>
    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
    <title> p2p broadcast demo </title>
    <style type="text/css">
        .room {
            cursor: pointer;
        }

        div.select {
            display: inline-block;
            margin: 0 0 1em 0;
        }
    </style>

    <script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>
    <script src="eventEmit.js"></script>
	<script src="simplepeer.min.js"></script>
	<script src="lalm.js"></script>
    <script src="cbor.js"></script>
    <script src="pusher.js?aa=bbc"></script>
    <script src="player.js?aa=bbc"></script>

    <script type='text/javascript'>
        window.localStorage.setItem('debug', '*');

        let pusher;
        let player;

        async function publish() {
            let videoElement = document.getElementById('video_container_publish');

            pusher = new Pusher();

            await pusher.init(videoElement);
        }

        async function play() {
            let videoElement = document.getElementById('video_container_play');

            player = new Player();

            videoElement.onloadedmetadata = function () {
                console.log('onloadedmetadata ' + Date.now());
            }

            await player.init(videoElement);
        }
    </script>

</head>

<body>
    <h1>p2p broadcast demo</h1>
    <br />

  昵称: <span id="userName"></span> <br/>
  房间: {{roomID}} <br/>

    <div>
        <button onclick="publish()">Publish</button>
        <br><br>
        <button onclick="play()">Play</button>
    </div>


    <div id="conference">
        publish:
        <br />
        <div id="container">
            <video id="video_container_publish" playsinline controls autoplay muted width="640" height="480"></video>
        </div>
        <br />

    </div>


    <div id="conference">
        play:
        <br />
        <div id="container">
            <video id="video_container_play" playsinline controls autoplay muted width="640" height="480"></video>
        </div>
        <br />
    </div>
</body>
</html>